/*
 * Given an ember-notify instance {{ember-notify classPrefix="custom-notify"}}
 * the following styles will position the notify box in the top center of the screen.
 * They also include custom animations for bouncing in and out.
 * These styles were shamelessly copied from https://github.com/Blooie/ember-cli-notifications/tree/master/addon/styles
 */
.custom-notify {
	position: fixed;
	top: 10px;
	right: 0;
	left: 0;
	z-index: 1060;
	width: 80%;
	max-width: 400px;
	margin: auto;
}
.custom-notify .callout {
	font: 14px Helvetica, sans-serif;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 2px;
	max-height: 800px;
	color: #fff;
	animation: notification-hide 250ms cubic-bezier(0.33859, -0.42, 1, -0.22), notification-shrink 250ms 250ms cubic-bezier(0.5, 0, 0, 1);
	-webkit-animation: notification-hide 250ms cubic-bezier(0.33859, -0.42, 1, -0.22), notification-shrink 250ms 250ms cubic-bezier(0.5, 0, 0, 1);
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
.custom-notify .ember-notify-show {
	animation: notification-show 180ms cubic-bezier(0.175, 0.885, 0.32, 1.27499);
	-webkit-animation: notification-show 180ms cubic-bezier(0.175, 0.885, 0.32, 1.27499);
}
.custom-notify .custom-notify-icon {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 30px;
	color: rgba(255, 255, 255, 0.74);
	text-align: center;
}
.custom-notify .custom-notify-icon span {
	position: relative;
	top: 10px;
}
.custom-notify .message {
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 40px;
	padding-right: 30px;
}
.custom-notify .close {
	position: absolute;
	top: 10px;
	right: 10px;
	opacity: .3;
	cursor: pointer;
}
.custom-notify .close:hover,
.custom-notify .close:focus {
	opacity: 1;
}
.custom-notify .error {
	background-color: #e74c3c;
}
.custom-notify .error .custom-notify-icon {
	background-color: #ba2c1d;
}
.custom-notify .error .close {
	color: #ba2c1d;
}
.custom-notify .success {
	background-color: #64ce83;
}
.custom-notify .success .custom-notify-icon {
	background-color: #3da95c;
}
.custom-notify .success .close {
	color: #3da95c;
}
.custom-notify .info {
	background-color: #3ea2ff;
}
.custom-notify .info .custom-notify-icon {
	background-color: #067cea;
}
.custom-notify .info .close {
	color: #067cea;
}
.custom-notify .warning {
	background-color: #ff7f48;
}
.custom-notify .warning .custom-notify-icon {
	background-color: #f44e06;
}
.custom-notify .warning .close {
	color: #f44e06;
}
/* animations used above */
@keyframes notification-show {
	0% {
		opacity: 0;
		transform: perspective(450px) translate(0, -30px) rotateX(90deg);
	}
	100% {
		opacity: 1;
		transform: perspective(450px) translate(0, 0) rotateX(0deg);
	}
}
@-webkit-keyframes notification-show {
	0% {
		opacity: 0;
		-webkit-transform: perspective(450px) translate(0, -30px) rotateX(90deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: perspective(450px) translate(0, 0) rotateX(0deg);
	}
}
@keyframes notification-shrink {
	0% {
		opacity: 0;
		max-height: 800px;
		margin-bottom: 2px;
		transform: scale(0.8);
	}
	100% {
		opacity: 0;
		max-height: 0;
		margin-bottom: 0;
		transform: scale(0.8);
	}
}
@-webkit-keyframes notification-shrink {
	0% {
		opacity: 0;
		max-height: 800px;
		margin-bottom: 2px;
		-webkit-transform: scale(0.8);
	}
	100% {
		opacity: 0;
		max-height: 0;
		margin-bottom: 0;
		-webkit-transform: scale(0.8);
	}
}
@keyframes notification-hide {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(0.8);
	}
}
@-webkit-keyframes notification-hide {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(0.8);
	}
}

.message-box {
	height: 300px;
	width: 200px;
	overflow-y: scroll;
	border: 1px solid gray;
}

.main-content {
	width: 300px;
	margin: 0 auto;
}

.main-content input {
	z-index: 5001;
}